<template>
        <div class="taskMode">
            <header>
                <mt-header title="创建检查任务" style="background-color:#F9F9F9;color:#333333;" >
                    <router-link to="/check" slot="left">
                        <mt-button icon="back">返回</mt-button>
                    </router-link>
                    <mt-button slot="right">确定</mt-button>
                </mt-header>
            </header>
            <section>
                <mu-paper :z-depth="1" class="demo-list-wrap">
                    <mu-list>
                        <mu-sub-header>任务检查表</mu-sub-header>
                        <mu-list-item button :ripple="false" @click="events = !events">
                            <mu-list-item-title>
                                检查表名称1
                            </mu-list-item-title>
                            <mu-list-item-action>
                                <mu-checkbox v-model="events"></mu-checkbox>
                            </mu-list-item-action>
                        </mu-list-item>
                        <mu-list-item button :ripple="false" @click="calls = !calls">
                            <mu-list-item-title>
                                检查表名称2
                            </mu-list-item-title>
                            <mu-list-item-action>
                                <mu-checkbox v-model="events"></mu-checkbox>
                            </mu-list-item-action>
                        </mu-list-item>
                        <mu-list-item button :ripple="false" @click="messages = !messages">
                            <mu-list-item-title>
                                检查表名称3
                            </mu-list-item-title>
                            <mu-list-item-action>
                                <mu-checkbox v-model="events"></mu-checkbox>
                            </mu-list-item-action>
                        </mu-list-item>
                    </mu-list>
                </mu-paper>
            </section>
        </div>
</template>

<script>
import { Checklist } from "mint-ui";
export default {
  name: "taskMode",
  data() {
    return {
      events: false,
      calls: false,
      messages: false,
      notifications: false,
      sounds: false,
      videoSounds: false
    };
  }
};
</script>

<style  lang="scss">
    .taskMode{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        header {
            width:100%;
            padding:10px 5px;
        }
        section {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: auto;
        }
    }
</style>
